<!-- 历史交易明细 -->
<script lang="ts" setup>
import { getList, viewList } from "@/api/system/RiskWarning";
import { onMounted, ref, reactive, toRefs } from "vue";
let headers = [
  { title: "收款单位", sortable: false, key: "payeeOrUnit" },
  { title: "交易次数", sortable: false, key: "transactionCount" },
  { title: "交易金额", sortable: false, key: "paymentAmount" },
  { title: "操作", key: "actions", sortable: false },
];
let dateRange = ref([]);
let isDialogVisible = ref(false);
let Data = ref([]);
const loading = ref(true);
const total = ref(0);
let data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    payeeOrUnit: "",
    tradeCount: "",
    beginTradeAmount: "",
    endTradeAmount: "",
    beginTransactionTime: "",
    endTransactionTime: "",
  },
});
const { queryParams } = toRefs(data);

const getViewList = async () => {
  let res = await getList(queryParams.value);
  Data.value = res.rows;
  total.value = res.total;
};
const handleQuery = () => {
  console.log(queryParams.value, "dateRange.value");
  getViewList();
};
onMounted(() => {
  getViewList();
});

let headersAdd = [
  { title: "收款单位", sortable: false, key: "payeeOrUnit" },
  { title: "费用类型", sortable: false, key: "paymentOrderFlag1" },
  { title: "流水号", sortable: false, key: "serialNumber" },
  { title: "经办人", sortable: false, key: "agent" },
  { title: "经办部门", sortable: false, key: "agentDept" },
  { title: "付款金额", sortable: false, key: "paymentAmount" },
  { title: "支付方式", sortable: false, key: "paymentMethod" },
  { title: "流程状态", sortable: false, key: "state1" },
  { title: "时间", sortable: false, key: "endTime" },
  { title: "凭证号", sortable: false, key: "voucherNumber" },
];
let transactionCount = ref("");
let DataAdd = ref([]);
const showView = async (item) => {
  transactionCount.value = item.transactionCount;
  let data = {
    ...queryParams.value,
    ...item,
  };
  let res = await viewList(data);
  DataAdd.value = res.data;
  DataAdd.value.forEach((element) => {
    switch (element.paymentOrderFlag) {
      case 1:
        element.paymentOrderFlag1 = "咨询协作";
        break;
      case 2:
        element.paymentOrderFlag1 = "业务招待";
        break;
      case 3:
        element.paymentOrderFlag1 = "通讯费";
        break;
      case 4:
        element.paymentOrderFlag1 = "市内交通";
        break;
      case 5:
        element.paymentOrderFlag1 = "差旅";
        break;
      case 6:
        element.paymentOrderFlag1 = "会议费";
        break;
      case 7:
        element.paymentOrderFlag1 = "固定资产采购";
        break;
      case 8:
        element.paymentOrderFlag1 = "房屋租赁";
        break;
      case 9:
        element.paymentOrderFlag1 = "通用付款";
        break;
      case 10:
        element.paymentOrderFlag1 = "专家费";
        break;
      case 11:
        element.paymentOrderFlag1 = "劳务费";
        break;
      case 12:
        element.paymentOrderFlag1 = "非员工交通住宿费";
        break;
    }
    switch (element.state) {
      case 0:
        element.state1 = "未结束";
        break;
      case 1:
        element.state1 = "已结束";
        break;
    }
  });
  isDialogVisible.value = true;
};

const Resetting = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    payeeOrUnit: "",
    tradeCount: "",
    beginTradeAmount: "",
    endTradeAmount: "",
  };
  dateRange.value = [];
  getViewList();
};
const checkRange = (value) => {
  if (value && value.length === 2) {
    const start = new Date(value[0]).getTime();
    const end = new Date(value[1]).getTime();
    const isOneYear = (end - start) / (365 * 24 * 3600 * 1000) >= 1;
    if (isOneYear) {
      dateRange.value = []; // 重置日期范围
    }
    queryParams.value.beginTransactionTime = dateRange.value[0];
    queryParams.value.endTransactionTime = dateRange.value[1];
  }
};
//分页器操作
const handleSizeChange = (e) => {
  queryParams.value.pageSize = e;
  getViewList();
};
const handleCurrentChange = (w) => {
  getViewList();
};

const deleteItem = (item) => {};
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.payeeOrUnit"
            label="收款单位"
            placeholder="请输入收款单位"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="1">
          <AppTextField
            v-model="queryParams.tradeCount"
            label="交易次数"
            placeholder="请输入"
            density="compact"
            type="number"
          />
        </VCol>
        <VCol cols="12" md="3">
          <div class="block">
            <div>
              <span class="demonstration">日期</span>
            </div>
            <el-date-picker
              style="width: 100%; background-color: rgb(var(--v-theme-surface))"
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="checkRange"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </div>
        </VCol>

        <VCol cols="12" md="3">
          <VRow class="match-height">
            <VCol cols="12" md="5">
              <AppTextField
                v-model="queryParams.beginTradeAmount"
                label="金额区间"
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>

            <div class="display_flex-end" style="padding-bottom: 15px">～</div>

            <VCol cols="12" md="5">
              <AppTextField
                v-model="queryParams.endTradeAmount"
                label=" "
                placeholder="请输入金额"
                type="number"
                density="compact"
              />
            </VCol>
          </VRow>
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="handleQuery">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="12">
          <VDataTable
            :headers="headers"
            :items="Data"
            :items-per-page="queryParams.pageSize"
            class="text-no-wrap"
          >
            <template #item.actions="{ item }">
              <div class="d-flex gap-1 position_a">
                <IconBtn @click="showView(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-eye"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                      <path
                        d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                      />
                    </svg>
                  </VIcon>
                </IconBtn>
              </div>
            </template>
          </VDataTable>
          <div class="mypagination">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[10, 25, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </VCol>

        <VDialog v-model="isDialogVisible" width="1200">
          <!-- Dialog close btn -->
          <DialogCloseBtn @click="isDialogVisible = !isDialogVisible" />

          <!-- Dialog Content -->
          <VCard title="交易列表">
            <VCardText>
              <VDataTable
                :headers="headersAdd"
                :items="DataAdd"
                :items-per-page="transactionCount"
                class="text-no-wrap"
              >
              </VDataTable>
            </VCardText>

            <!-- <VCardText class="d-flex justify-end">
				        <VBtn @click="isDialogVisible = false">
				          关闭
				        </VBtn>
				      </VCardText> -->
          </VCard>
        </VDialog>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped >
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.mb-1 {
  margin-bottom: 0px !important;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important ;
}

.demonstration {
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  font-size: 13px;
}
</style>
